<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-19 09:52:48
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-14 14:05:11
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\collectionManage\receivingLog\index.vue
 * @Description: 收款日志
-->
<template>
  <custom-container ref="customContainerRef" :config="config" />
  <image-view-dialog ref="imageViewRef" />
</template>
<script setup lang="ts">
import { computed, ref, reactive } from 'vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import { getLogList, logExport, cashierConfirm } from '@/api/finance/receiverManange'
import { DictDirection } from '@/store/modules/dicts'
import { download, parseTime } from '@/utils/index'

const imageViewRef = ref(null)
const customContainerRef = ref(null)
const multipleSelection = ref([])

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  customerCode: undefined,
  receivingAccount: undefined,
  transfereeAccountName: undefined,
  currency: undefined,
  exchangeRate: undefined,
  receivingDateRange: undefined,
  receivingUser: undefined,
  cashierConfirmation: undefined,
})

const cashierConfirmRequest = (ids) => cashierConfirm({ ids }).then(({ code, msg }) => {
  if (code === 200) {
    customContainerRef.value.getList()
    ElMessage.success('确认成功！')
  } else {
    ElMessage.error(msg)
  }
})

const exportLoading = ref<boolean>(false)
const cashierLoading = ref<boolean>(false)
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            // type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              clearable: true,
              // dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '收款账户',
            prop: 'receivingAccount',
          },
          {
            label: '转入方名称',
            prop: 'transfereeAccountName',
          },
          {
            type: 'select',
            label: '币种',
            prop: 'currency',
            option: {
              clearable: true,
              dictInfo: { dict: DictDirection.币种 },
            },
          },
          {
            type: 'date-picker',
            label: '创建日期',
            prop: 'exchangeRate',
          },
          {
            type: 'date-picker',
            label: '收款日期',
            prop: 'receivingDateRange',
          },
          {
            label: '收款人',
            // type: 'select',
            prop: 'receivingUser',
            option: {
              // dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '收款确认',
            // type: 'select',
            prop: 'cashierConfirmation',
            option: {
              // dictInfo: { dict: DictDirection.客户 },
            },
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [
        {
          title: '导出收款',
          type: 'primary',
          loading: exportLoading.value,
          onClick: (e) => {
            exportLoading.value = true
            download('/finance/collection/record/export', {}, '收款.xlsx').finally(() => {
              exportLoading.value = false
            })
          },
        },
        {
          title: '批量出纳确认',
          type: 'primary',
          disabled: !(multipleSelection.value.length && multipleSelection.value.every(i => i.cashierConfirmation != '2')),
          loading: cashierLoading.value,
          onClick: (e) => {
            cashierLoading.value = true
            const ids = multipleSelection.value.map(i => i.id)
            cashierConfirmRequest(ids).finally(() => {
              cashierLoading.value = false
            })
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '客户名称', align: 'center', prop: 'customerName' },
          { label: '收款账号', align: 'center', prop: 'receivingAccount' },
          { label: '收款金额', align: 'center', prop: 'exchangeRateAmount' },
          { label: '收款人', align: 'center', prop: 'receivingUser' },
          { label: '收款时间',
            align: 'center',
            prop: 'receivingDate',
            formatter(row) {
              return parseTime(new Date(row.receivingDate))
            } },
          { label: '收款备注', align: 'center', prop: 'receivingRemarks' },
          { label: '创建人', align: 'center', prop: 'createUser' },
          { label: '创建时间',
            align: 'center',
            prop: 'createDate',
            formatter(row) {
              return parseTime(new Date(row.createDate))
            } },
          { label: '转入方名称', align: 'center', prop: 'transfereeAccountName' },
          { label: '币种',
            align: 'center',
            prop: 'currency',
            autoFormatter: {
              dict: DictDirection.币种,
              rowKey: 'currency',
            } },
          { label: '汇率', align: 'center', prop: 'exchangeRate' },
          { label: '汇率金额', align: 'center', prop: 'paymentAmount' },
          {
            label: '操作',
            align: 'center',
            width: '200',
            fixed: 'right',
            render(h, { row }) {
              const btn = [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      imageViewRef.value.open(row.collectionImgList)
                    },
                  },
                  {
                    default: () => '查看图片',
                  },
                ),
              ]
              if (row.cashierConfirmation !== '2') {
                btn.push(h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    loading: !!row.loading,
                    onClick: () => {
                      ElMessageBox.confirm('是否确认？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                      }).then(() => {
                        row.loading = true
                        cashierConfirmRequest([row.id]).finally(() => {
                          row.loading = false
                        })
                      })
                    },
                  },
                  {
                    default: () => '出纳确认',
                  },
                ))
              }

              return btn
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            multipleSelection.value = rows
          },
        },
      },
      api: getLogList,
    }
  },
  set(val) {
    return val
  },
})

</script>